<template>
  <div class="custome-table">
    <el-form :disabled="detail">
      <div class="table-title">检修记录表</div>
      <el-form-item label="故障类型">
        <el-select v-model="faultType" placeholder="请选择" clearable>
          <el-option
            v-for="item in faultTypeList"
            :key="item.code"
            :value="item.code"
            :label="item.codeName"
          />
        </el-select>
      </el-form-item>
      <div class="custom-table">
        <!-- 记录表1 -->
        <table class="w20">
          <tr class="hide">
            <td /><td /><td /><td /><td /><td /><td /><td /><td /><td /><td /><td /><td /><td /><td /><td /><td /><td /><td /><td />
          </tr>
          <tr>
            <td class="center" colspan="4">设备名称</td>
            <td colspan="4"><el-input v-model="form.key1" /></td>
            <td class="center" colspan="3">规格型号</td>
            <td colspan="3"><el-input v-model="form.key2" /></td>
            <td class="center" colspan="3">设备编号</td>
            <td colspan="3"><el-input v-model="form.key3" /></td>
          </tr>
          <tr>
            <td class="center" colspan="4">安装时间</td>
            <td class="date w100" colspan="4"><el-date-picker v-model="form.key4" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" /></td>
            <td class="center" colspan="3">安装地点</td>
            <td colspan="9"><el-input v-model="form.key5" /></td>
          </tr>
          <tr>
            <td class="center" colspan="4">维护管理单位</td>
            <td colspan="16"><el-input v-model="form.key6" /></td>
          </tr>
          <tr>
            <td class="center" colspan="4">故障情况及发生时间</td>
            <td colspan="16">
              <el-input v-model="form.key7" />
              <div class="table-row"><div style="width: 120px;">仪器设备管理员：</div><el-input v-model="form.key8" style="width: 220px;" /></div>
              <div class="table-row"><div style="width: 120px;">日期：</div><el-date-picker v-model="form.key9" type="date" value-format="yyyy-MM-dd" /></div>
              <div class="table-row"><div style="width: 120px;">维修人：</div><el-input v-model="form.key10" style="width: 220px;" /></div>
              <div class="table-row"><div style="width: 120px;">日期：</div><el-date-picker v-model="form.key11" type="date" value-format="yyyy-MM-dd" /></div>
            </td>
          </tr>
          <tr>
            <td class="center" colspan="4">修复后使用前校验时间、 校验结果说明</td>
            <td colspan="16">
              <el-input v-model="form.key12" />
              <div class="table-row"><div style="width: 120px;">校验人：</div><el-input v-model="form.key13" style="width: 220px;" /></div>
              <div class="table-row"><div style="width: 120px;">日期：</div><el-date-picker v-model="form.key14" type="date" value-format="yyyy-MM-dd" /></div>
            </td>
          </tr>
          <tr>
            <td class="center" colspan="4">正常投入使用时间</td>
            <td colspan="16">
              <el-input v-model="form.key15" />
              <div class="table-row"><div style="width: 120px;">仪器设备管理员：</div><el-input v-model="form.key16" style="width: 220px;" /></div>
              <div class="table-row"><div style="width: 120px;">日期：</div><el-date-picker v-model="form.key17" type="date" value-format="yyyy-MM-dd" /></div>
              <div class="table-row"><div style="width: 120px;">负责人：</div><el-input v-model="form.key18" style="width: 220px;" /></div>
              <div class="table-row"><div style="width: 120px;">日期：</div><el-date-picker v-model="form.key19" type="date" value-format="yyyy-MM-dd" /></div>
            </td>
          </tr>
        </table>
        <!-- 记录表2 -->
        <table class="w20">
          <tr class="hide">
            <td /><td /><td /><td /><td /><td /><td /><td /><td /><td /><td /><td /><td /><td /><td /><td /><td /><td /><td /><td />
          </tr>
          <tr>
            <td class="center" colspan="5">站点名称</td>
            <td colspan="5"><el-input v-model="form.key20" /></td>
            <td class="center" colspan="5">停机时间</td>
            <td class="date w100" colspan="5"><el-date-picker v-model="form.key21" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" /></td>
          </tr>
          <template v-for="(arr,i) in tableLabels">
            <template v-for="(label,j) in arr[1]">
              <tr v-if="j==0" :key="i+'_'+j">
                <td class="center" colspan="5" :rowspan="arr[1].length">{{ arr[0] }}</td>
                <td colspan="5">{{ label }}</td>
                <td colspan="10">
                  <el-input v-model="form['key'+(21+arr[2]*1+1)]" />
                  <!-- {{ (2+arr[2]*1+1) }} -->
                </td>
              </tr>
              <tr v-else :key="i+'_'+j">
                <td colspan="5">{{ label }}</td>
                <td colspan="10">
                  <el-input v-model="form['key'+(21+arr[2]*1+j*1+1)]" />
                  <!-- {{ (2+arr[2]*1+j*1+1) }} -->
                </td>
              </tr>
            </template>
          </template>
          <!-- 31 -->
          <tr>
            <td class="center" colspan="5">站房清理</td>
            <td colspan="5"><el-input v-model="form.key50" /></td>
            <td colspan="10"><el-input v-model="form.key51" /></td>
          </tr>
          <tr>
            <td class="center" colspan="5">停机检修情况总结</td>
            <td colspan="15"><el-input v-model="form.key52" :rows="4" type="textarea" placeholder="停机检修情况总结" /></td>
          </tr>
          <tr>
            <td class="center" colspan="5">备注</td>
            <td colspan="15"><el-input v-model="form.key53" type="textarea" placeholder="备注" /></td>
          </tr>
          <tr>
            <td class="center" colspan="5">检修人</td>
            <td colspan="5"><el-input v-model="form.key54" /></td>
            <td class="center" colspan="5">离站时间</td>
            <td colspan="5"><el-date-picker v-model="form.key55" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" /></td>
          </tr>
        </table>
        <table style="margin-top: 20px;">
          <tr>
            <td width="150">上传文件：图片</td>
            <td colspan="6"><TableUpLoadFile ref="tableUploadFile" :files-list="filePath" :detail="detail" /></td>
          </tr><tr>
            <td width="150">上传文件：视频</td>
            <td colspan="6"><TableUpLoadVideo ref="tableUploadVideo" :video-list="videoPath" :detail="detail" /></td>
          </tr>
        </table>
      </div>
    </el-form>

  </div>
</template>

<script>
import { getDict } from '@/utils/dict'
import { fileUrl, staticImgUrl } from '@/url'
import TableUpLoadFile from './../TableUpLoadFile'
import TableUpLoadVideo from './../TableUpLoadVideo'
export default {
  name: 'Xj',
  components: {
    TableUpLoadFile,
    TableUpLoadVideo
  },
  props: {
    obj: {
      type: Object,
      default: null
    },
    maintenaIndex: {
      type: Number,
      default: 0
    },
    detail: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      imagePreview: false,
      videoLoadingFlag: false,
      imgLoadingFlag: false,
      typeList: [],
      faultTypeList: [],
      faultType: null,
      fileUrl, staticImgUrl,
      yesNoList: [
        { value: '是', label: '是' },
        { value: '否', label: '否' }
      ],
      // 显示的图片数据
      filePath: [],
      showVideoPath: [],
      videoPath: [],
      form: {
        key1: '',
        key2: '',
        key3: '',
        key4: '',
        key5: ''
      },
      tableLabels: [
        ['水质自动采样系统', ['检修情况描述', '更换部件1', '更换部件2'], 0], // 3
        ['化学需氧量自动分析仪', ['设备型号及编号', '检修情况描述', '更换部件1', '更换部件2'], 3], // 7
        ['氨氮自动分析仪', ['设备型号及编号', '检修情况描述', '更换部件'], 7], // 10
        ['总氮、总磷自动分析仪', ['设备型号及编号', '检修情况描述', '更换部件'], 10], // 13
        ['其他设备', ['设备型号及编号', '检修情况描述', '更换部件'], 13], // 16
        ['其他设备', ['设备型号及编号', '检修情况描述', '更换部件'], 16], // 19
        ['其他设备', ['设备型号及编号', '检修情况描述', '更换部件'], 19], // 22
        ['流量计', ['设备型号及编号', '检修情况描述', '更换部件'], 22], // 25
        ['数据釆集传输仪', ['设备型号及编号', '检修情况描述', '更换部件'], 25] // 28
      ]

    }
  },
  mounted() {
    this.init()
    this.typeList = getDict('e015')
    // const infoStr = this.$store.getters.user.info
    // if (infoStr) {
    //   const info = JSON.parse(infoStr)
    //   this.form.key6 = info.realName
    // }
  },
  methods: {
    init() {
      if (this.obj.list) {
        const maintenaData = this.obj.list[this.maintenaIndex]
        if (maintenaData.filePath) {
          this.filePath = JSON.parse(maintenaData.filePath)
          this.$refs['tableUploadFile'].init(this.filePath)
        }
        if (maintenaData.videoPath) {
          this.videoPath = JSON.parse(maintenaData.videoPath)
        }
        if (maintenaData.formContent) {
          this.form = JSON.parse(maintenaData.formContent)
        }
        this.form.enterpriseName = this.obj.enterpriseName
        this.form.outletName = this.obj.outletName
        this.faultType = maintenaData.faultType

        if (this.obj.equipmentTypeName.indexOf('COD') !== -1) {
          this.faultTypeList = getDict('e063')
        } else if (this.obj.equipmentTypeName.indexOf('氨氮') !== -1) {
          this.faultTypeList = getDict('e064')
        } else if (this.obj.equipmentTypeName.indexOf('总磷') !== -1) {
          this.faultTypeList = getDict('e065')
        } else if (this.obj.equipmentTypeName.indexOf('总氮') !== -1) {
          this.faultTypeList = getDict('e066')
        }
      }
      // 默认值填充
      if (this.obj.lastMaintenance) {
        var lastMaintenance = JSON.parse(this.obj.lastMaintenance.formContent)
        this.form.key1 = lastMaintenance.key1
        this.form.key2 = lastMaintenance.key2
        this.form.key3 = lastMaintenance.key3
        this.form.key5 = lastMaintenance.key5
        this.form.key6 = lastMaintenance.key6
      }
    },
    getFormData() {
      return {
        formContent: JSON.stringify(this.form),
        filePath: this.$refs.tableUploadFile ? this.$refs.tableUploadFile.getPaths() : [],
        videoPath: this.$refs.tableUploadVideo ? this.$refs.tableUploadVideo.getPaths() : [],
        faultType: this.faultType,
        maintenaIndex: this.maintenaIndex
      }
    },
    clearData() {
      this.form = {
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
